import { defineComponent } from 'vue';
import './index.less';

export default defineComponent({
    name: 'SvgIcon',
    props: {
        prefix: {
            type: String,
            default: 'icon',
        },
        name: {
            type: String,
            required: true,
        },
        color: {
            type: String,
            default: '#333',
        },
        height: {
            type: String,
            default: '28px',
        },
        width: {
            type: String,
            default: '28px',
        },

    },
    setup(props) {
        const symbolId = computed(() => `#${props.prefix}-${props.name}`)

        return () => (
            <div class="svg_icon" style={{ height: props.height, width: props.width }}><svg aria-hidden="true" style={{ height: props.height, width: props.width }}>
                <use href={symbolId.value} fill={props.color} />
            </svg></div>

        );
    }
});
